import styled from '@emotion/styled';
import { Select } from 'antd';
import { t } from 'i18next';
import React, { useEffect, useState } from 'react';
import EmptyTalk from './EmptyTalk';

interface TTSSelectProps {
	options: { id: number; title: string; content: string }[];
	disabled?: boolean;
	onChange: (id: number) => void;
	onPopupScroll: (event: any) => void;
}

const TTSContainer = styled.div`
	width: 100%;
	padding: 10px 0;
`;

const TTSLabel = styled.p``;

const TTSSelect = (props: TTSSelectProps) => {
	const { options, disabled = false, onChange, onPopupScroll } = props;

	const [ttsOptions, setTTSoptions] = useState<{ value: number; label: string }[]>([]);

	useEffect(() => {
		setTTSoptions(options.map(item => ({ value: item.id, label: item.title })));
	}, [options]);

	const changeSelect = (value: number) => {
		onChange(value);
	};

	return (
		<TTSContainer>
			<TTSLabel>{t('select-talk')}</TTSLabel>
			<Select
				getPopupContainer={triggerNode => {
					return triggerNode.parentNode;
				}}
				onPopupScroll={onPopupScroll}
				disabled={disabled}
				allowClear
				notFoundContent={<EmptyTalk text={t('no-talks') || ''} />}
				style={{ width: '100%' }}
				options={ttsOptions}
				defaultValue={undefined}
				onChange={changeSelect}
				placeholder={t('select-tts-placeholder') || ''}
			></Select>
		</TTSContainer>
	);
};

export default TTSSelect;
